<style scoped lang="scss">
.bigBox {
  width: 100vw;
  height: 100vh;
  .my-swipe .van-swipe-item {
    width: 100vw;
    height: 100vh;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    .mainOne {
      width: 100%;
      flex: 1;
    }
    footer {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: start;
      position: absolute;
      bottom: 24px;
      .start-top {
        font-size: 14px;
      }
    }
    .mainTwo {
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      .imgCon {
        width: 180px;
        height: 180px;
        margin-top: 200px;
      }
      p {
        font-size: 13px;
      }
    }
    .mainThree {
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      .imgCon {
        width: 180px;
        height: 180px;
        margin-top: 200px;
      }
      p {
        font-size: 13px;
      }
    }
  }
}
</style>

<template>
  <div class="bigBox">
    <van-swipe class="my-swipe" :loop="false" indicator-color="#1989fa">
      <van-swipe-item>
        <main class="mainOne">
          <img
            style="width: 100%; height: 100%"
            src="../../assets/images/image/xhdpi/start_page.png"
            alt=""
          />
        </main>
        <footer>
          <div class="start-top">八维网站工程学院毕业作品</div>
        </footer>
      </van-swipe-item>
      <van-swipe-item>
        <main class="mainTwo">
          <img class="imgCon" src="../../assets/images/image/hdpi/guide_pages_one.png" alt="" />
          <p>专业的在线问诊</p>
        </main>
      </van-swipe-item>
      <van-swipe-item>
        <main class="mainTwo">
          <img class="imgCon" src="../../assets/images/image/hdpi/guide_pages_two.png" alt="" />
          <p>丰富的健康常识</p>
        </main>
      </van-swipe-item>
      <van-swipe-item>
        <main class="mainTwo">
          <img class="imgCon" src="../../assets/images/image/hdpi/guide_pages_three.png" alt="" />
          <p>守护家庭的健康</p>
        </main>
      </van-swipe-item>
      <van-swipe-item>
        <main class="mainTwo">
          <img class="imgCon" src="../../assets/images/image/hdpi/guide_pages_four.png" alt="" />
          <p>便捷的在线购药</p>
        </main>
      </van-swipe-item>
      <van-swipe-item
        ><main class="mainThree">
          <img class="imgCon" src="../../assets/images/image/hdpi/guide_pages_five.png" alt="" />
          <p>打造你的健康常青树</p>
          <van-button type="primary" size="small" @click="goHome">马上进入</van-button>
        </main></van-swipe-item
      >
    </van-swipe>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
const router = useRouter()

const goHome = () => {
  router.push('/home')
}
</script>
